<template>
	<Layout style="padding:24px 0 0 0;height:100%;">
		<Form inline>
			<FormItem label="签收用户" :label-width="80">
				<Input clearable v-model="pageRequest.condition.assignee" placeholder="查询指派用户流程" />
			</FormItem>
			<FormItem label="拥有用户" :label-width="80">
				<Input clearable v-model="pageRequest.condition.owner" placeholder="查询拥有用户流程" />
			</FormItem>
			<FormItem label="候选用户" :label-width="80">
				<Input clearable v-model="pageRequest.condition.candidateUsers" placeholder="查询候选用户流程" />
			</FormItem>
			<FormItem label="候选组" :label-width="80">
				<Input clearable v-model="pageRequest.condition.candidateGroups" placeholder="查询候选组流程" />
			</FormItem>
			<FormItem label="流程名称" :label-width="80">
				<Input clearable v-model="pageRequest.condition.processDefinitionName" placeholder="搜索流程名称" />
			</FormItem>
			<FormItem label="">
				<Button type="primary" icon="ios-search" shape="circle" title="查询" @click="list"></Button>
			</FormItem>
		</Form>
		<Content ref="content" style="padding:0px;background:#fff;height:100%">
			<Table :loading="loading" :columns="tableColumns" :data="pageData.content" :height="tableHeight" border>
				<template slot-scope="{ row, index }" slot="action">
					<el-dropdown @command="action($event, row)">
						<Button type="primary" size="small">
							操作
							<Icon type="ios-arrow-down"></Icon>
						</Button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="diagram">流程图</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
				<template slot="footer">
					<Page style="margin-left:10px;" :total="pageData.total" :current="pageData.page" :page-size="15" @on-change="changePage"></Page>
				</template>
			</Table>
		</Content>
		<!-- 流程图对话框 -->
		<Modal title="流程图" v-model="diagramModal" width="800px" footer-hide>
			<div id="bpmn-viewer-p3" style="width:100%;height:400px;">
			</div>
		</Modal>
	</Layout>
</template>

<script language="JavaScript">

import BpmnViewer from 'bpmn-js';

import processForm from './process-form';

export default {
	components: {
		processForm
	},
	data() {
		return {
			tableHeight: 100, // 自适应表格高度
			loading: false, // 加载中
			diagramModal: false, // 流程显示
			tableColumns: [
				{
					type: 'selection',
					width: 80
				},
				{
					title: '任务ID',
					key: 'id',
					width: 350,
					resizable: true
				},
				{
					title: '流程名称',
					key: 'procDefName',
					width: 'auto',
					minWidth: 250,
					resizable: true
				},
				{
					title: '任务名称',
					key: 'name',
					width: 250,
					resizable: true
				},
				{
					title: '签收人',
					key: 'assignee',
					width: 200,
					resizable: true
				},
				{
					title: '拥有者',
					key: 'owner',
					width: 200,
					resizable: true
				},
				{
					title: '委托状态',
					key: 'delegation',
					width: 200,
					resizable: true
				},
				{
					title: '创建时间',
					key: 'createTime',
					width: 'auto',
					minWidth: 300,
					resizable: true
				},
				{
					title: '操作',
					slot: 'action',
					fixed: 'right',
					width: 150
				}
			], // 表格列
			// 分页请求
			pageRequest: {
				page: 1,
				rows: 15,
				sort: 'id:asc',
				condition: {
					processDefinitionName: '', // 流程名称
				}
			},
			// 分页查询结果
			pageData: {
				page: 1,
				total: 2,
				content: [] // 表格数据
			},
			bpmnViewer: null, // bpmn viewer
		};
	},
	computed: {},
	watch: {},
	created: function() {},
	mounted: function() {
		this.$nextTick(() => {
			this.tableHeight = this.$refs.content.$el.clientHeight;
			this.list();
		});
	},
	methods: {
		// 获取列表
		list: function() {
			this.$request.post(
				'/admin/sys/workflow/task/getCompleteTaskList',
				this.pageRequest,
				res => {
					this.pageData = res.data || this.pageData;
				},
				false,
				false
			);
		},
		action: function(name, row) {
			if (name == 'diagram') {
				this.getActivityInstances(row);
			}
		},
		// 获取历史活动节点
		getActivityInstances: function(row) {
			this.$request.get(`/admin/sys/workflow/task/getNodeIds/${row.procInstId}`, {}, res => {
				this.showDiagram(row, res.data || {});
			}, false, true, true);
		},
		showDiagram: function(row, obj) {
			this.$request.get(`/admin/sys/workflow/definition/bpmnXml/${row.procDefId}`, {}, res => {
				this.diagramModal = true;
				this.bpmnViewer && this.bpmnViewer.destroy();
				this.bpmnViewer = new BpmnViewer({container:"#bpmn-viewer-p3"});
				let result = this.bpmnViewer.importXML(res.data).then(() => {
					const bpmnCanvas = this.bpmnViewer.get('canvas');
					bpmnCanvas.zoom('fit-viewport');
					// 画流线
					if (obj.seqIds && obj.seqIds.length > 0) {
						obj.seqIds.forEach(s => {
							bpmnCanvas.addMarker(s, "highlight-4");
						});
					}
					// 画节点
					if (obj.actIns && obj.actIns.length > 0) {
						obj.actIns.forEach(act => {
							// 将之前流过的节点颜色删除，防止css冲突
							for(let i = 0; i < 5; i++) {
								if (bpmnCanvas.hasMarker(act.activityId, `highlight-${i}`)) {
									bpmnCanvas.removeMarker(act.activityId, `highlight-${i}`);
								}
							}
							bpmnCanvas.addMarker(act.activityId, `highlight-${act.activityInstanceState}`);
						});
					}
				});
			}, false, true, true);
		},
		// 分页
		changePage: function(page) {
			this.pageRequest.page = page;
			this.list();
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
</style>
